<template>
  <div>
    <el-card class="box-card">
      <span><i class="iconfont icon-dingdan1 icon"> </i>填写品牌信息</span>
    </el-card>
    <el-card class="box-card">
      <div>
        <!-- :model="listQuery" 添加数据时需要提交的表单内容 放到
        :rules="rules" 验证内容
          -->
        <el-form
          :model="brandlist"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="品牌名称:" prop="name">
            <el-input v-model="brandlist.name"></el-input>
          </el-form-item>
          <el-form-item label="品牌首字母:">
            <el-input v-model="brandlist.first_letter"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO:" prop="pic">
            <el-input v-model="brandlist.logo"></el-input>
          </el-form-item>

          <el-form-item label="品牌专区大图:">
            <el-input v-model="brandlist.big_pic"></el-input>
          </el-form-item>

          <el-form-item label="品牌故事:" >
            <el-input v-model="brandlist.brand_story" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="排序:" prop="sort">
            <el-input v-model="brandlist.sort" class="input-width"></el-input>
          </el-form-item>

          <el-form-item label="是否显示">
            <el-radio-group v-model="brandlist.show_status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group >
          </el-form-item>

          <el-form-item label="品牌制造商">
            <el-radio-group v-model="brandlist.factory_status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group >
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm()">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAddbrand } from "@/api/product";
export default {
  name: "brandadd",
  data: function () {
    return {
      brandlist: {
        big_pic: "", //大图
        brand_story: "", //品牌故事
        factory_status: 0, //品牌制造商
        first_letter: "", //品牌首字母
        logo: "", //品牌logo
        name: "", //品牌名称
        show_status: 0, //品牌是否显示
        sort: 0, //品牌排序
      },
      rules:{
        name:[
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
         pic:[
          { required: true, message: '请输入品牌LOGO', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          getAddbrand(this.brandlist).then((res) => {
            if (res.status === 200) {
              this.$message({
                message: "添加一条新纪录",
                type: "success",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {},
  },
};
</script>

<style>
</style>